<template>
  <div class="inforCard">
      <!-- 设计师基本信息 -->
      <div class="base-case">
          <div class="main-case">
              <div class="padding-case">
                <div class="setting-nav"><img  @click="goPersonal" src="@/assets/img/designer/personalCenter/settingicon.png" alt=""></div>
                <div class="main-content">
                    <div class="left-case" @click="goPersonality">
                        <img v-if="!list.pictureUrl" src="@/assets/img/designer/personalCenter/defaultHeadPortrait.png">
                        <img v-else :src="list.pictureUrl">
                        <div class="tag-level">
                            <div class="tag-content" v-if="list.vipLevel">VIP{{list.vipLevel}}</div>
                        </div>
                    </div>
                    <div class="right-case">
                        <div class="key-value">
                            <div class="top-value">{{list.userName?list.userName:'待完善'}}</div>
                            <div class="top-key">{{list.phone?list.phone:'待完善'}}</div>
                        </div>
                        <div class="key-value1" @click="goFollowlist">
                            <div class="top-value">{{list.attentionCount?list.attentionCount:'0'}}</div>
                            <div class="top-key">关注</div>
                        </div>
                        <div class="key-value1" @click="goBacklist">
                            <div class="top-value">{{list.blackCount?list.blackCount:'0'}}</div>
                            <div class="top-key">黑名单</div>
                        </div>
                    </div>
                </div>
              </div>
          </div>
      </div>
      <div class="nav-rate">
          <div class="nav-case bgwrite">
              <div class="each-nave" @click="$router.push('/designer/myWorks')">
                <div class="top-img"><img src="@/assets/img/designer/personalCenter/worksicon.png" alt=""></div>
                <div class="foot-name">我的作品</div>
              </div>
              <div class="each-nave" @click="$router.push({path:'/performance/address?ismine=1'})">
                <div class="top-img"><img src="@/assets/img/designer/personalCenter/locationicon.png" alt=""></div>
                <div class="foot-name">我的地址</div>
              </div>
              <div class="each-nave" @click="$router.push('/designer/myAssess')">
                <div class="top-img"><img src="@/assets/img/designer/personalCenter/remarksicon.png" alt=""></div>
                <div class="foot-name">我的评价</div>
              </div>
              <div class="each-nave" @click="$router.push('/designer/complaintCenter')">
                <div class="top-img"><img src="@/assets/img/designer/personalCenter/helpericon.png" alt=""></div>
                <div class="foot-name">投诉中心</div>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import {getuserUid, setUserInfo} from '@/utils/auth.js'
export default {
  data() {
    return {
        list: {}
    }
  },
  components: {
  },
  computed: {
  },
  created() {
      this.getUserMsgCenter()
  },
  mounted() {
  },
  methods: {
    // 我的作品
    toMyJob(){
        this.$router.push('myJobs');
    },
    //   黑名单
    goBacklist() {
        this.$router.push('/designer/backList')
    },
    //  关注名单
    goFollowlist() {
        this.$router.push('/designer/followList')
    },
    // 我的设置
    goPersonal() {
        this.$router.push('/designer/myInfo')
    },
    // 我的 -个人资料
    goPersonality() {
        this.$router.push('/designer/myPersonality')
    },
    // 获取个人中心首页数据
    async getUserMsgCenter() {
      const res = await HTTP("userCenter", {
        userUid: getuserUid()
      });
      if (res.code == 200) {
          this.list = res.data
          setUserInfo(res.data)
      } else {
        this.$toast(res.msg|| '服务器异常')
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.inforCard {
    position: relative;
    width: 100%;
  // 基本信息框
  .base-case{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      .main-case{
          width: 100%;
          height: 3.16rem;
          background-image: url(../../../assets/img/designer/personalCenter/backgroundIcon.png);
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: 100% 3.16rem;
          .padding-case{
              box-sizing: border-box;
              padding: 0.24rem;
          }
          .setting-nav{
              position: relative;
              width: 100%;
              height: 0.5rem;
              margin-bottom: 0.24rem;
              img{
                  position: absolute;
                  right: 0;
                  width: 0.5rem;
                  height: 0.5rem;
              }
          }
          .main-content{
              display: flex;
              width: 100%;
              height: 1.28rem;
              div{
                  display: inline-block;
              }
              .left-case{
                  position: relative;
                  width: 1.28rem;
                  height: 1.28rem;
                  border-radius: 50%;
                  margin-right: 0.24rem;
                  background: #EEEEEE;
                  box-shadow: 0 0 0.1rem #fff;
                  img{
                      border-radius: 50%;
                      width: 1.28rem;
                      height: 1.28rem;
                  }
                  .tag-level{
                      position: absolute;
                      bottom: -0.1rem;
                      left: 15%;
                      width: 100%;
                      .tag-content{
                          width: 70%;
                          background: #FFBA5A;
                          border-radius: 0.02rem;
                          text-align: center;
                          color: #FFFFFF;
                          font-family: PingFangSC-Regular;
                          font-weight: 400;
                          font-size: 0.24rem;
                      }
                  }
              }
              .right-case{
                  height: 1.28rem;
                  display: flex;
                  width: 80%;
                  justify-content: space-around;
                  align-items: center;
                  text-align: center;
                  .key-value{
                      color:#FFFFFF;
                      width: 35%;
                      margin-right: 5%;
                      .top-value{
                          display: block;
                          line-height: 0.32rem;
                          font-size: 0.32rem;
                          font-family: PingFangSC-Semibold;
                          font-weight: 600;
                          margin-bottom: 0.2rem;
                                word-wrap: normal;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                      }
                      .top-key{
                          line-height: 0.26rem;
                          font-size: 0.26rem;
                          font-family: PingFangSC-Regular;
                          font-weight: 400;
                      }
                  }
                  .key-value1{
                      color:#FFFFFF;
                      width: 30%;
                      .top-value{
                          display: block;
                          line-height: 0.32rem;
                          font-size: 0.32rem;
                          font-family: PingFangSC-Semibold;
                          font-weight: 600;
                          margin-bottom: 0.2rem;
                      }
                      .top-key{
                          line-height: 0.26rem;
                          font-size: 0.26rem;
                          font-family: PingFangSC-Regular;
                          font-weight: 400;
                      }
                  }
              }
          }
      }
  }
//  4入口 评价
  .nav-rate{
      position: fixed;
      top: 2.76rem;
      left: 0;
      box-sizing: border-box;
      width: 100%;
      padding: 0 0.24rem;
      margin-bottom: 0.24rem;
      // 4入口
      .nav-case{
          height: 1.8rem;
          margin-bottom: 0.24rem;
          width: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          text-align: center;
          border-radius: 0.1rem;
          .each-nave{
              height: 1rem;
              border-radius: 0.1rem;
              .top-img{
                  height: 0.76rem;
                  line-height: 0.76rem;
                  img{
                     width: 0.44rem;
                  }
              }
              .foot-name{
                  color: #656565;
                  font-size: 0.24rem;
                  font-family: PingFangSC-Regular;
                  font-weight: 400;
                  line-height: 0.24rem;
              }
          }
      }
  }
}
</style>
